<template>
  <a-modal
    v-model:visible="visible"
    width="800px"
    title-align="start"
    :footer="false"
    :ok-loading="okLoading"
    @close="emit('close')"
  >
    <template #title> {{ tit }} </template>
    <div>
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item
              field="secretLevel"
              label="密级"
              :disabled="tit === '编辑'"
            >
              <secretLevelSelect
                v-model="form.secretLevel"
                :default-value="form.secretLevel"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="tit === '批量新增'" :span="12">
            <a-form-item field="periodAmount" label="期段数量">
              <a-input
                v-model="form.periodAmount"
                placeholder="请输入期段数量"
                allow-clear
                :disabled="dis"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="tit !== '批量新增'" :span="12">
            <a-form-item field="periodNumber" label="期段号">
              <a-input
                v-model="form.periodNumber"
                placeholder="请输入期段号"
                allow-clear
                :disabled="dis"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="tit === '编辑'" :span="12">
            <a-form-item field="accountingYear" label="会计年度">
              <a-input
                v-model="form.accountingYear"
                placeholder="请输入会计年度"
                allow-clear
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="startTime" label="开始日期">
              <a-date-picker
                v-model="form.startTime"
                placeholder="请输入开始日期"
                value-format="YYYY-MM-DD"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="periodType" label="期段类型">
              <dictSelect
                v-model="form.periodType"
                allow-clear
                placeholder="请输入期段类型"
                dict-type="periodType"
                :disabled="dis"
              />
            </a-form-item>
          </a-col>
          <a-col
            v-if="tit === '新增' || ['月', '0'].includes(form.periodType)"
            :span="12"
          >
            <a-form-item field="endTime" label="结束日期">
              <a-date-picker
                v-model="form.endTime"
                placeholder="请输入结束日期"
                value-format="YYYY-MM-DD"
                :disabled-date="(current) => endTimeFun(current)"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="footer">
      <a-button v-if="btns.includes('return')" @click="emit('close')"
        >返回</a-button
      >
      <a-button v-if="btns.includes('save')" type="primary" @click="saveForm"
        >保存</a-button
      >
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue';
  import lodash from 'lodash';
  import dayjs from 'dayjs';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import DictSelect from '@/common/components/dict-select/index.vue';
  import {
    addBatch,
    addOne,
    editOne,
  } from '@/api/balance-management/systemPeriodMaintenance';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    formData: {
      type: Object,
      default: () => {},
    },
    dis: {
      type: Boolean,
      default: false,
    },
    columnNumber: {
      type: Number,
      default: 2,
    },
  });
  const rules = ref({
    secretLevel: [{ required: true, message: '请选择密级' }],
    periodAmount: [{ required: true, message: '请输入期段数量' }],
    periodNumber: [{ required: true, message: '请输入期段号' }],
    accountingYear: [{ required: true, message: '请输入会计年度' }],
    startTime: [{ required: true, message: '请选择开始时间' }],
    endTime: [{ required: true, message: '请选择结束时间' }],
    periodType: [{ required: true, message: '请选择期段类型' }],
  });
  const tit = ref('批量修改');
  const btns = ref<any[]>([]);
  const form = ref<any>({});
  const dis = ref(false);
  const visible = ref(true);
  const okLoading = ref(false);
  watch(
    () => props.formData,
    (n) => {
      form.value = n;
    }
  );
  const emit = defineEmits(['close', 'save']);
  const getStatus = () => {
    return lodash.cloneDeep(form.value);
  };

  const show = (data: any, title: string, pDis: boolean, pbtns: any) => {
    form.value = data;
    tit.value = title;
    dis.value = pDis;
    btns.value = pbtns;
  };
  const formRef = ref();
  const saveForm = async () => {
    console.log(formRef);
    const verifyStatus = await formRef.value?.validate();
    if (!verifyStatus) {
      if (tit.value === '批量新增') {
        try {
          const res: any = await addBatch(form.value);
          if (res.code === 200) {
            Message.success('新增成功');
            emit('save');
          }
        } catch (err: any) {
          console.log(err);
        }
      } else if (tit.value === '新增') {
        try {
          const res: any = await addOne(form.value);
          if (res.code === 200) {
            Message.success('新增成功');
            emit('save');
          }
        } catch (err: any) {
          console.log(err);
        }
      } else if (tit.value === '编辑') {
        try {
          const res: any = await editOne(form.value);
          if (res.code === 200) {
            Message.success('编辑成功');
            emit('save');
          }
        } catch (err: any) {
          console.log(err);
        }
      }
    }
  };
  const endTimeFun = (current: any) => {
    const newDate = new Date(form.value.startTime);
    const date = new Date(form.value.startTime);
    newDate.setMonth(date.getMonth() + 1);
    newDate.setDate(1);
    newDate.setDate(0);
    return (
      dayjs(current).isAfter(dayjs(newDate.toLocaleDateString())) ||
      dayjs(current).isBefore(dayjs(form.value.startTime))
    );
  };
  defineExpose({ getStatus, show });
</script>

<style lang="less" scoped>
  .query-form {
    display: flex;
    width: 100%;
    padding: 20px;
    background: #f7f9fc;
    border-radius: 8px;
  }
  ::v-deep .arco-form-item {
    .arco-picker-size-medium {
      width: 100%;
    }
  }
  .footer {
    display: flex;
    justify-content: end;
    padding-top: 16px;
    border-top: 1px solid var(--color-neutral-3);
    ::v-deep .arco-btn {
      margin-left: 16px;
    }
  }
</style>
